<!-- 商城退货订单列表 -->
<template>
	<view class="content">
		<!-- 空白页 -->
		<empty v-if="ordersList.length === 0" :custom="true" src="../../static/images/no-orders.png" text="您还没有退款记录哦"></empty>

		<!-- 订单列表 -->
		<navigator v-for="(items,index) in ordersList" :key="index" :url="'/mall/order/refund/refundStep?id='+items.id + '&type=' + items.type"
		 hover-class="none">
			<view class="order-item">
				<!-- 店铺名称 -->
				<view class="i-top b-b" @tap.stop="goStore(items.seller_id)">
					<image class="seller_logo" :src="items.sellerInfo.online_logo" mode=""></image>
					<text class="seller_name clamp">{{items.sellerInfo.online_name}}</text>
					<text class="yticon icon-you"></text>
					<text class="state" v-if="items.status == 0">提交申请</text>
					<text class="state" v-if="items.type == 1&&[1].includes(Number(items.status))">商家同意</text>
					<text class="state" v-if="items.type == 0&&[1,6].includes(Number(items.status))">商家同意</text>
					<text class="state" v-if="items.status == 2">寄送商品</text>
					<text class="state" v-if="items.type == 1&&[3,6].includes(Number(items.status))">商家收货</text>
					<text class="state" v-if="items.status == 5">退款完成</text>
					<text class="state" v-if="items.status == -1">商家拒绝</text>
				</view>

				<scroll-view v-if="items.return_goods.length > 1" class="goods-box" scroll-x>
					<view v-for="(goodsItem, goodsIndex) in items.return_goods" :key="goodsIndex" class="goods-item" @tap.stop="goGoods(goodsItem.product_id)">
						<image v-if="goodsItem.attrInfo" class="goods-img" :src="goodsItem.attrInfo.image" mode="aspectFill"></image>
						<image v-else class="goods-img" :src="goodsItem.image" mode="aspectFill"></image>
					</view>
				</scroll-view>
				<view v-if="items.return_goods.length === 1" class="goods-box-single" v-for="(goodsItem, goodsIndex) in items.return_goods"
				 :key="goodsIndex">
					<image class="goods-img" v-if="goodsItem.attrInfo.length !== 0" :src="goodsItem.attrInfo.image" mode="aspectFill"
					 @tap.stop="goGoods(goodsItem.product_id)"></image>
					<image class="goods-img" v-else :src="goodsItem.image" mode="aspectFill" @tap.stop="goGoods(goodsItem.product_id)"></image>
					<view class="right">
						<text class="title clamp">{{goodsItem.store_name}}</text>
						<view class="attr-box">
							<text>{{goodsItem.attrInfo.suk||''}}</text>
							<text>x {{goodsItem.product_num}}</text>
						</view>
						<text class="price" v-if="goodsItem.attrInfo.length !== 0">{{goodsItem.attrInfo.price}}</text>
						<text class="price" v-else>{{goodsItem.price}}</text>
					</view>
				</view>

				<view class="price-box">
					共
					<text class="num">{{items.total_num}}</text>
					件商品 共退款
					<text class="price">{{items.refund_money}}</text>
				</view>
				<!-- 待支付 -->
				<!-- <view class="action-box b-t" v-if="items.paid == 0">
					<button class="action-btn contact" @tap.stop="phoneCall(items.online_phone)">联系商家</button>
					<button class="action-btn" @tap.stop="cancelOrder(items.order_id)">取消订单</button>
					<button class="action-btn recom" @tap.stop="goPay(items.order_id)">立即支付</button>
				</view> -->
				<!-- 待发货 -->
				<!-- <view class="action-box b-t" v-if="items.status == 0&&items.paid == 1">
					<button class="action-btn contact" @tap.stop="phoneCall(items.online_phone)">联系商家</button>
					<button class="action-btn" @tap.stop="refund(items.id)">申请退款</button>
				</view> -->
				<!-- 待收货 -->
				<!-- <view class="action-box b-t" v-if="items.status == 1"> -->
					<!-- <button class="action-btn contact" @tap.stop="phoneCall(items.online_phone)">联系商家</button> -->
					<!-- <button class="action-btn" @tap.stop="againBuy(items.order_id)">再次购买</button> -->
					<!-- <button class="action-btn" @tap.stop="express(items.order_id)">查看物流</button>
					<button class="action-btn recom" @tap.stop="queren(items.order_id)">确认收货</button> -->
				<!-- </view> -->
				<!-- 待评价 -->
				<!-- <view class="action-box b-t" v-if="items.status == 2"> -->
					<!-- <button class="action-btn contact" @tap.stop="phoneCall(items.online_phone)">联系商家</button> -->
					<!-- <button class="action-btn" @tap.stop="againBuy(item.id)">申请开票</button> -->
					<!-- <button class="action-btn" @tap.stop="againBuy(items.order_id)">再次购买</button> -->
					<!-- <button class="action-btn" @tap.stop="express(items.order_id)">查看物流</button> -->
					<!-- <button class="action-btn recom" @tap.stop="goComment(items.order_id)">立即评价</button> -->
				<!-- </view> -->
				<!-- 已完成 -->
				<!-- <view class="action-box b-t" v-if="items.status == 3"> -->
					<!-- <button class="action-btn contact" @tap.stop="phoneCall(items.online_phone)">联系商家</button> -->
					<!-- <button class="action-btn" @tap.stop="againBuy(item.id)">申请开票</button> -->
					<!-- <button class="action-btn" @tap.stop="express(items.order_id)">查看物流</button> -->
					<!-- <button class="action-btn recom" @tap.stop="againBuy(items.order_id)">再次购买</button> -->
				<!-- </view> -->
			</view>
		</navigator>

		<uni-load-more class="loadMore" iconType="circle" :status="loadStatus" :contentText="contentText"></uni-load-more>

	</view>
</template>

<script>
	import {
		returnList
	} from '@/api/mall.js'
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	import empty from "@/components/empty/empty";
	export default {
		components: {
			uniLoadMore,
			empty
		},
		data() {
			return {
				loadStatus: "loading",
				contentText: {
					contentdown: "上拉显示更多",
					contentrefresh: "正在加载...",
					contentnomore: "没有更多了"
				},
				ordersList: [],
				limit: 6,
				page: 1,
			};
		},
		onLoad() {
			this.loadData()
		},
		onShow() {
			if (uni.getStorageSync('doRefresh')) {
				this.loadStatus = "loading";
				this.page = 1;
				this.ordersList = [];
				this.loadData();
				uni.removeStorageSync('doRefresh')
			}
		},
		onReachBottom() {
			if (this.loadStatus == "more")
				(this.loadStatus = "loading"), this.loadData()
		},
		methods: {
			//获取订单列表
			async loadData() {
				returnList({
					page: this.page,
					limit: this.limit,
				}).then(res => {
					uni.hideLoading()
					this.loadStatus = "more";
					this.ordersList.push.apply(this.ordersList, res.data);
					if (res.data.length < this.limit) this.loadStatus = "noMore"; //判断所有数据是否加载完成；
					this.page = this.page + 1;
					if (this.ordersList.length == 0) {
						this.contentText.contentnomore = '暂无数据'
					} else {
						this.contentText.contentnomore = '没有更多了'
					}
				})
			},
			// 去店铺
			goStore(id) {
				uni.navigateTo({
					url: `/mall/product/onlineStore?id=${id}`
				})
			},
			// 去商品详情
			goGoods(id) {
				uni.navigateTo({
					url: `/mall/product/product?id=${id}`
				})
			},
			// 联系商家
			phoneCall(phone) {
				uni.makePhoneCall({
					phoneNumber: phone
				})
			},
		},
	}
</script>

<style lang="scss" scoped>
	page,
	.content {
		background: #f5f5f5;
		min-height: 100vh;
		padding-top: 20rpx;
		box-sizing: border-box;
	}

	.order-item {
		display: flex;
		flex-direction: column;
		margin: 0 30rpx 20rpx;
		padding: 0 20rpx;
		background: #fff;
		border-radius: 10rpx;

		.i-top {
			display: flex;
			align-items: center;
			height: 80rpx;
			padding-right: 30rpx;
			font-size: 28rpx;
			color: #303133;
			position: relative;

			.seller_logo {
				width: 40rpx;
				height: 40rpx;
				border-radius: 20rpx;
				margin-right: 20rpx;
			}

			.seller_name {
				max-width: 400rpx;
			}

			.icon-you {
				margin-top: 4rpx;
				margin-left: 10rpx;
				font-size: 24rpx;
			}

			.state {
				position: absolute;
				right: 0;
				top: 20rpx;
				color: #FB3737;
			}
		}

		/* 多条商品 */
		.goods-box {
			height: 120rpx;
			padding: 20rpx;
			width: 100%;
			margin-left: -20rpx;
			white-space: nowrap;
			background-color: #f8f8f8;

			.goods-item {
				width: 120rpx;
				height: 120rpx;
				display: inline-block;
				margin-right: 24rpx;
			}

			.goods-img {
				display: block;
				width: 100%;
				height: 100%;
			}
		}

		/* 单条商品 */
		.goods-box-single {
			display: flex;
			padding: 20rpx;
			margin-left: -20rpx;
			width: 100%;
			background-color: #f8f8f8;

			.goods-img {
				display: block;
				width: 120rpx;
				height: 120rpx;
			}

			.right {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				padding: 0 0 0 24rpx;
				overflow: hidden;

				.title {
					font-size: 30rpx;
					color: #303133;
					line-height: 1;
				}

				.attr-box {
					font-size: 26rpx;
					color: #909399;
					display: flex;
					justify-content: space-between;
				}

				.price {
					font-weight: bold;
					text-align: right;
					font-size: 30rpx;
					color: #303133;

					&:before {
						content: '￥';
						font-size: 24rpx;
						margin: 0 2rpx 0 8rpx;
					}
				}
			}
		}

		.price-box {
			display: flex;
			justify-content: flex-end;
			align-items: baseline;
			padding: 20rpx 0;
			font-size: 24rpx + 2rpx;
			color: #909399;

			.num {
				margin: 0 8rpx;
				color: #303133;
			}

			.price {
				font-size: 32rpx;
				color: #FB3737;
				font-weight: bold;

				&:before {
					content: '￥';
					font-size: 24rpx;
					margin: 0 2rpx 0 8rpx;
				}
			}
		}

		.action-box {
			display: flex;
			justify-content: flex-end;
			align-items: center;
			height: 100rpx;
			position: relative;
		}

		.action-btn {
			width: 160rpx;
			height: 60rpx;
			margin: 0;
			margin-left: 24rpx;
			padding: 0;
			text-align: center;
			line-height: 60rpx;
			font-size: 24rpx;
			color: #303133;
			background: #fff;
			border-radius: 100px;

			&:after {
				border-radius: 100px;
			}

			&.recom {
				background: #FB3737;
				color: #fff;

				&:after {
					border-color: #FB3737;
				}
			}
		}

		.contact {
			position: absolute;
			left: 0;
			margin: 0;
		}
	}
</style>
